
<script lang="ts" setup>
import { Search, ArrowDown } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchGetActivityList, fetchGetActivityPersonList, fetchPutActivity } from '@/api/activity'
import { filterDate } from '@/utils/format'
import { useUserStore } from "@/store/modules/user";
import { usePublicStoreHook } from "@/store/modules/public";
import router from "@/router";

const value2 = ref(true)
// 表单数据
let tableData = reactive([])
// 实际传递的条件
const listQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  pageSize: 10,
  form: undefined, // 活动形式
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  type: undefined, // 类型
  status: undefined, // 招新状态
  form: undefined, // 活动形式
})
const typeOptions = [
  {
    value: 0,
    label: '社团活动',
  },
  {
    value: 1,
    label: '院级活动',
  },
  {
    value: 2,
    label: '校级活动',
  },
]
const formOptions = [
  {
    value: 0,
    label: '线上',
  },
  {
    value: 1,
    label: '线下',
  },
]
const statusOptions = [
  {
    value: 0,
    label: '报名未开始',
  },
  {
    value: 1,
    label: '报名中',
  },
  {
    value: 2,
    label: '报名已结束',
  },
  {
    value: 3,
    label: '活动进行汇总',
  },
  {
    value: 4,
    label: '活动已结束',
  },
  {
    value: 5,
    label: '活动已取消',
  },
]

const total = ref<number>(0)// 列表总数
const total2 = ref<number>(0)// 活动人员列表总数
// 查询
const handleSearch = () => {
  getPageList()
}

const tableLoading = ref(false)
// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery.name = showQuery.name
  listQuery.type = showQuery.type
  listQuery.status = showQuery.status
  listQuery.form = showQuery.form
  const res = await fetchGetActivityList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  data.forEach((item: { examine: boolean; }) => {
    if (Number(item.examine) == 1) {
      item.examine = true
    } else {
      item.examine = false
    }
  })
  tableData = data
  tableLoading.value = false
}



onMounted(() => {
  getPageList()
})

// 表单数据
let tableData2 = reactive([])

let table1 = ref(false) // 查看详情抽屉
const table3 = ref(false) // 前往总结抽屉
const table4 = ref(false) // 人员管理抽屉


/**
 * 取消活动
 */
const handleCancle = (row: any) => {
  ElMessageBox.confirm(
    '当前操作会取消本场活动，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      if (row.status == 4) {
        ElMessage({
          message: '该活动已经结束，无法取消',
          type: 'warning'
        })
      } else if (row.status == 5) {
        ElMessage({
          message: '该活动已经被取消',
          type: 'warning'
        })
      }
      else {
        fetchPutActivity({ id: row.id, status: 5 }).then((res) => {
          if (Number(res.code) == 200) {
            getPageList()
            ElMessage({
              message: '取消成功',
              type: 'success'
            })
          }
        })
      }

    })
    .catch(() => {
    })
}

// 修改活动信息
const handleEdit = (row: any) => {
  if (row.status < 3) {
    router.push({ path: '/student/mySociety/editActivity', query: { ...row } })
  } else {
    ElMessage({
      message: '活动已经开始，无法修改',
      type: 'warning'
    })
  }
}



const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  societyName: 'Hello',
  reason: '',
})

const rules = reactive<FormRules>({
  societyName: [
    {
      required: true,
      message: '社团名称',
      trigger: 'change',
    },
  ],
  reason: [
    {
      required: true,
      message: '解散原因',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 过滤活动类型
const filterActivityType = (val: number) => {
  switch (val) {
    case 0:
      return '社团活动'
    case 1:
      return '院级活动'
    case 2:
      return '校级活动'
  }
}

let dialogData1 = reactive({
  address: "篮球场",
  applicationEndTime: "2023-05-01T22:57:16.000Z",
  applicationStartTime: "2023-04-30T22:57:12.000Z",
  attachment: null,
  createdAt: "2023-04-30T22:56:07.000Z",
  examine: 1,
  form: 1,
  formalEndTime: "2023-05-04T22:57:49.000Z",
  formalStartTime: "2023-05-01T22:57:33.000Z",
  id: 3,
  imgurl: "http://rtd5c53vw.hn-bkt.clouddn.com/1682854657053-%E9%AD%94%E6%9C%AFa.png",
  introduce: "魔术社的第一届的活动，希望通过本次活动让大家快速的熟悉起来",
  name: "趣味魔术表演赛",
  nowNumber: 1,
  person: "-36-37-38-",
  planBook: null,
  planNumber: 30,
  score: "1.5",
  society: 59,
  status: 0,
  summary: null,
  type: 0,
  updatedAt: "2023-04-30T22:56:10.000Z",
})
// 查看详情
const handleItem1 = (row: { address: string; applicationEndTime: string; applicationStartTime: string; attachment: null; createdAt: string; examine: number; form: number; formalEndTime: string; formalStartTime: string; id: number; imgurl: string; introduce: string; name: string; nowNumber: number; person: string; planBook: null; planNumber: number; score: string; society: number; status: number; summary: null; type: number; updatedAt: string; }) => {
  table1.value = true
  dialogData1 = row
}
// 活动人员管理
const handleItem4 = (row: { address: string; applicationEndTime: string; applicationStartTime: string; attachment: null; createdAt: string; examine: number; form: number; formalEndTime: string; formalStartTime: string; id: number; imgurl: string; introduce: string; name: string; nowNumber: number; person: string; planBook: null; planNumber: number; score: string; society: number; status: number; summary: null; type: number; updatedAt: string; }) => {
  table4.value = true
  dialogData1 = row
  getPageList2(row)
}
// 实际传递的条件
const listQuery2 = reactive({
  currentPage: 1,
  person: dialogData1.person,
  pageSize: 10,
})
// 获取列表
const getPageList2 = async (row:any) => {
  listQuery2.person = row.person
  const res = await fetchGetActivityPersonList(listQuery2)
  const { currentPage, data } = res.data
  listQuery2.currentPage = showQuery.currentPage = currentPage
  total2.value = res.data.total
  tableData2 = data
}
/**
 * 过滤学院
 */
const filterCollege = (college: any) => {
  let collegeName = ''
  usePublicStoreHook().collegeList.forEach((item) => {
    if (item.id == college) {
      collegeName = item.name
    }
  })
  return collegeName
}
/**
 * 过滤专业
 */
const filterMajor = (major: any) => {
  let majorName = ''
  usePublicStoreHook().majorList.forEach((item) => {
    if (item.id == major) {
      majorName = item.name
    }
  })
  return majorName
}
/**
 * 过滤年级
 */
const filterGrade = (grade: any) => {
  let gradeName = ''
  usePublicStoreHook().gradeList.forEach((item) => {
    if (item.id == grade) {
      gradeName = item.name
    }
  })
  return gradeName
}

//  更改活动是否需要审批
const changeSwitch = (row: any) => {
  fetchPutActivity({ id: row.id, examine: row.examine == true ? 1 : 0 }).then((res) => {
    if (Number(res.code) == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
    }
  })
}
const customColors = [
  { color: '#38EF7D', percentage: 20 },
  { color: '#2FDC80', percentage: 40 },
  { color: '#25C585', percentage: 60 },
  { color: '#1BAF8A', percentage: 80 },
  { color: '#11998D', percentage: 100 },
]

// 将人员移出活动
const removePerson = (row:any) => {
  console.log(row)
  ElMessageBox.confirm(
    `是否将 ${row.name} 移出本次活动？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      fetchPutActivity({ id: row.id, status: 5 }).then((res) => {
        if (Number(res.code) == 200) {
          getPageList()
          ElMessage({
            message: '取消成功',
            type: 'success'
          })
        }
      })
    })
    .catch(() => {
    })
}
</script>

<template>
  <div class="society-content container">
    <div class="header flex flex-center">
      <el-select v-model="showQuery.type" class="m-2" placeholder="活动类型" clearable>
        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="showQuery.form" class="m-2" placeholder="活动形式" clearable>
        <el-option v-for="item in formOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="showQuery.status" class="m-2" placeholder="活动状态" clearable>
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="showQuery.name" placeholder="活动名称" clearable />
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>

    <el-table :data="tableData" stripe>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="name" label="活动名称" show-overflow-tooltip />
      <el-table-column prop="activityForm" label="活动形式" show-overflow-tooltip width="100">
        <template #default="scope">
          <div class="flex flex-center">
            <div class="student-button">{{ scope.row.form == 0 ? '线上' : '线下' }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="活动类型">
        <template #default="scope">
          <div class="flex flex-center">
            <div class="student-button">{{ filterActivityType(scope.row.type) }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="percentage" label="报名进度" width="250">
        <template #default="scope">
          <el-progress :percentage="Number((scope.row.nowNumber / scope.row.planNumber * 100).toFixed(1))"
            :color="customColors" :stroke-width="12" />
        </template>
      </el-table-column>
      <el-table-column prop="minister" label="剩余名额">
        <template #default="scope">
          <div>{{ scope.row.planNumber - scope.row.nowNumber }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动状态" width="120">
        <template #default="scope">
          <div v-if="scope.row.status == 0" class="theme-info">报名未开始</div>
          <div v-if="scope.row.status == 1" class="theme-success">报名中</div>
          <div v-if="scope.row.status == 2" class="theme-error">报名结束</div>
          <div v-if="scope.row.status == 3" class="theme-blue">活动进行中</div>
          <div v-if="scope.row.status == 4" class="theme-info">活动已结束</div>
          <div v-if="scope.row.status == 5" class="theme-error">活动已取消</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="score" label="是否总结">
        <template #default="scope">
          <div class="flex flex-center">
            <div class="student-button">{{ scope.row.summary ? '已总结' : '未总结' }}</div>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="examine" label="活动免审批">
        <template #default="scope">
          <div>
            <el-switch v-model="scope.row.examine" class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #DCDFE6" @change="changeSwitch(scope.row)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" class="btn-green" :icon="ArrowDown">
              更多
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleItem1(scope.row)">查看详情</el-dropdown-item>
                <el-dropdown-item @click="handleEdit(scope.row)">前往修改</el-dropdown-item>
                <!-- <el-dropdown-item @click="table3 = true">前往总结</el-dropdown-item> -->
                <el-dropdown-item @click="handleItem4(scope.row)">人员管理</el-dropdown-item>
                <el-dropdown-item @click="handleCancle(scope.row)">取消活动</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />


    <!-- 查看详情抽屉 -->
    <el-drawer v-model="table1" direction="rtl" size="40%">
      <template #header="{ titleId }">
        <h1 :id="titleId">{{ dialogData1.name }}</h1>
      </template>
      <div class="el-drawer-content">
        <p>活动简介：{{ dialogData1.introduce }}</p>
        <el-image style=" height: 400px" :src="dialogData1.imgurl" :zoom-rate="1.2"
          :preview-src-list="[dialogData1.imgurl]" fit="cover" />
        <p>活动二课分：{{ dialogData1.score }}分</p>
        <p>活动总名额：{{ dialogData1.planNumber }}人</p>
        <p>活动地点：{{ dialogData1.address }}</p>
        <p>报名起止时间：{{ filterDate(dialogData1.applicationStartTime) }} ~~ {{ filterDate(dialogData1.applicationEndTime) }}
        </p>
        <p>活动起止时间：{{ filterDate(dialogData1.formalStartTime) }} ~~ {{ filterDate(dialogData1.formalEndTime) }}</p>
      </div>
    </el-drawer>

    <!-- 前往总结抽屉 -->
    <el-drawer v-model="table3" direction="rtl" size="40%">
      <template #header="{ titleId }">
        <h1 :id="titleId">第一届歌手大赛活动总结</h1>
      </template>
      <div class="el-drawer-content">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" label-width="150px"
          class="demo-ruleForm" size="default" status-icon>
          <el-form-item label="活动名称" prop="societyName">
            <el-input v-model="ruleForm.societyName" />
          </el-form-item>
          <el-form-item label="活动总结" prop="reason">
            <el-input v-model="ruleForm.reason" type="textarea" :rows="8" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">上传活动图片</el-button>
          </el-form-item>
          <el-form-item class="form-button">
            <el-button type="primary" size="large" @click="submitForm(ruleFormRef)">
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <!-- 人员管理抽屉 -->
    <el-drawer v-model="table4" direction="rtl" size="80%">
      <template #header="{ titleId }">
        <h1 :id="titleId">{{ dialogData1.name + '人员名单' }}</h1>
      </template>
      <div class="progress-box flex justify-around items-center">
        <div class="box-item">
          <span class="progress-name">计划人数：</span>
          <span class="progress-count">{{ dialogData1.planNumber }}</span>
        </div>
        <div class="box-item">
          <span class="progress-name">已报名人数：</span>
          <span class="progress-count">{{ dialogData1.nowNumber }}</span>
        </div>
        <div class="box-item">
          <span class="progress-name">剩余名额：</span>
          <span class="progress-count">{{ dialogData1.planNumber - dialogData1.nowNumber }}</span>
        </div>
      </div>
      <div class="el-drawer-content">
        <el-table :data="tableData2" stripe>
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="姓名" show-overflow-tooltip width="100" />
          <el-table-column prop="gender" label="性别" show-overflow-tooltip width="100">
            <template #default="scope">
              <div>
                {{ scope.row.gender == 0 ? '男' : '女' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
          <el-table-column prop="email" label="邮箱" show-overflow-tooltip />
          <el-table-column prop="stuCode" label="学号" sortable show-overflow-tooltip />
          <el-table-column prop="college" label="学院" show-overflow-tooltip>
            <template #default="scope">
              <div>
                {{ filterCollege(scope.row.college) || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="major" label="专业" show-overflow-tooltip>
            <template #default="scope">
              <div>
                {{ filterMajor(scope.row.major) || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="grade" label="年级" show-overflow-tooltip>
            <template #default="scope">
              <div>
                {{ filterGrade(scope.row.grade) || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作">
            <template #default="scope">
              <div class="theme-success">
                <el-button type="danger" link @click="removePerson(scope.row)">移出</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="total2" v-model:page="listQuery2.currentPage" v-model:limit="listQuery2.pageSize"
          hide-on-single-page @pagination="getPageList2" />
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.society-content {
  width: 100%;
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;

  .header {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }

  .student-button {
    border: 1px solid #DAECFE;
    color: #409EFF;
    background-color: #ECF5FF;
    // width: 5.5rem;
    padding: 0 0.8rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 0.5rem;
  }

  .el-dropdown {
    .el-icon {
      margin-left: 0.5rem;
    }
  }

  .el-drawer {
    .el-drawer-content {
      p {
        font-size: 1.4rem;
        font-weight: 600;
        text-indent: 2em;
        line-height: 3rem;
        margin: 1.5rem 0;
      }

      img {
        width: 100%;
      }

      .el-form-item {
        margin-bottom: 4rem;
      }

      .form-button {
        .el-button {
          margin-left: calc(100% - 10rem);
        }
      }
    }
  }

  .progress-box {
    font-size: 3rem;
    font-weight: 700;
    border: 2px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    color: #fff;
    background: $liner-tgreen;
    height: 8rem;
    margin-bottom: 2rem;

    .progress-name {}

    .box-item {
      margin-right: 2rem;
    }
  }

}
</style>
<style lang="scss">
.el-drawer__header {
  margin-bottom: 0px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;

  h1 {
    text-align: center;
    color: #2FBFB7;
  }
}
</style>

